const webpack = require('webpack')
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// webpack4的配置
module.exports = {
    // webpack4需要添加这个配置，development为开发环境，production为生产环境
    mode: "development",
    entry: __dirname + "/src/main.js", // 之前提到的唯一入口文件
    output: {
        // path: __dirname + "/server/public", // 打包后的文件存放的地方
        path: __dirname + "/common", // 打包后的文件存放的地方
        filename: "index.js", // 打包后输出文件的文件名
        // publicPath: 'common/'
    },

    plugins: [new VueLoaderPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
        }),
        new UglifyJsPlugin()
    ],

    module: { // 配置所有第三方loader 模块的
        rules: [ // 第三方模块的匹配规则
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }, // 处理 CSS 文件的 loader
            {
                test: /\.(ttf|eot|svg|woff|woff2)$/,
                use: 'url-loader'
            }, // 处理 字体文件的 loader 
            {
                test: /\.(jpg|png|gif|bmp|jpeg)$/,
                // use: 'url-loader'
                use: [{
                    loader: 'url-loader',
                    options: {
                        esModule: false, // 这里设置为false---webpack打包html里面img后src为“[object Module]”问题
                        name: '[name].[ext]',
                        limit: 10240,
                        // fallback: 'file-loader'
                    }
                }]
            },
            // {
            //     test: /\.(png|jpg|gif)$/,
            //     use: [{
            //         loader: 'file-loader',
            //         options: {
            //             //limit: 10240, //图片小于8KB时候将图片转成base64字符串，大于8KB需要使用file-loader
            //             name: '[name].[ext]' //img表示文件父目录，[name]表示文件名,[hash:8]表示将hash截取8位[ext]表示后缀
            //         }
            //     }]
            // }, // 处理 图片路径的 loader
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                query: {
                    limit: 10000,
                    name: 'video/[name].[ext]'
                }
            }, //处理MP4视频
            {
                test: /\.vue$/,
                use: 'vue-loader'
            } // 处理 .vue 文件的 loader

        ]
    },
    resolve: {
        alias: { // 修改 Vue 被导入时候的包的路径
            "vue$": "vue/dist/vue.js", //指定vue版本
            // '@': resolve('static'),
            // '@videos':resolve('static/videos'),
            // '@images':resolve('static/images'),
            // //  add static路径
            // 'static': path.resolve(__dirname, 'static'),
        }
    },
}